<!DOCTYPE html>
<html lang="en">

<head>
	<title>medchain</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- For now I am using Bootstrap 3 cdn link. Feel free to use Bootstrap 4 by replacing the link below -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body id='patient-info-ejs'>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="/">
					<span id='color-one'>med</span><span id='color-two'>chain</span>
				</a>
			</div>
			<ul class="nav navbar-nav">
				<li class='active'><a href="#">Patient</a></li>
				<li><a href="#">Doctor</a></li>
				<li><a href="#">Pharmacist</a></li>
			</ul>
		</div>
	</nav>
	<div class='container-fluid'>
		<div class='row' id='header-section'>
			<div class='col-md-2 col-sm-2'>
				<div id='face-picture'>
					<img src='../images/square-sample-face.jpg' width='120px' class='img-responsive' />
				</div>
			</div>
			<div class='col-md-5 col-sm-5'>
				<div id='name-and-role'>
					<h2><%=doc[0].name%>, <%=doc[0].age%></h2>
					<h4>SOFTWARE DEVELOPER</h4>
				</div>
			</div>
		</div>
		<div class='row' id='personal-info'>
			<div id='address'>
				<div class='col-md-1 col-sm-1'>
					<i class='fa fa-home fa-3x'></i>
				</div>
				<div class='col-md-3 col-sm-3'>
					<h4>
						<% if (doc[0].address){ %>
							<%= doc[0].address %>
						<% } else { %>
							<%= "288 Spadina Road" %>
						<% } %>
					</h4>
					<br/>
					<!-- <span style='font-weight:700'>Toronto, ON</span> -->
				</div>
			</div>
			<div id='phone-number'>
				<div class='col-md-1 col-sm-1'>
					<i class='fa fa-phone fa-3x'></i>
				</div>
				<div class='col-md-3 col-sm-3'>
					<h4><%= doc[0].phoneno ? doc[0].phoneno : "(416) 338-1882"%></h4>
				</div>
			</div>
			<div id='send-email'>
				<div class='col-md-1 col-sm-1'>
					<i class='fa fa-envelope fa-3x'></i>
				</div>
				<div class='col-md-3 col-sm-3'>
					<h4>Send an Email</h4>
				</div>
			</div>
		</div>
	</div>
	<!--container-fluid-->
	<form id='disease-select' method="POST" action="/doctor-main">
		<input type="hidden" name="name" value="<%= doc[0].name %>">
		<div class='container-fluid' id='patient-info'>
			<div class='row'>
				<div class='col-md-5 col-md-offset-1' id='drugs'>
					<h2>Prescribed Medicines</h2>
					<ul>
						<%	if (doc[0].drugs.length > 0) { -%>
							<% for(var i = 0; i < doc[0].drugs.length; i++) { %>
								<% if (doc[0].drugs[i].length > 0) { -%>
									<li><%= doc[0].drugs[i] %></li>	
								<% } %>
							<% } %>
						<% } else { -%>
							<h4 style='margin-left: 1.25em;'>No Medications</h4>
						<% } -%>
					</ul>
				</div>
				<div class='col-md-6 col-sm-6'>
					<h2>Needs treatment for</h2>
					<!-- <label>Disease 1</label> -->
					<select name='disease1' id='diseases' required>
						<optgroup label='Type A Medical Conditions'>
							<option value='' disabled selected hidden>Please Choose...</option>
							<option value='Hepatitis'>Hepatitis</option>
							<option value='Hypothyroidism'>Hypothyroidism</option>
							<option value='Coronary Atherosclerosis'>Coronary Atherosclerosis</option>
						</optgroup>
						<optgroup label='Type B Medical Conditions'>
							<option value='Depression'>Depressive Disorder</option>
							<option value='Diabetes'>Diabetes</option>
						</optgroup>
					</select>
				</div>
			</div>
			<!--patient-info-->
			<div class='row' id='activities'>
				<div class='col-md-7 col-md-offset-1'>
					<h2>Recent Activity</h2>
					<ul id='activity-list'>
						<% var leng = doc[0].comments.length %>
						<% if (leng > 0) { -%>
							<% var j = (leng > 10) ? 10 : leng;
								var placeholder = j;
							-%>
							<% for (var i = leng-placeholder; i < leng; i++) { -%>
								<% if (doc[0].comments[i].length > 0) { -%>
									<li>
										<label><%= j %> days ago</label>
										<span><%= doc[0].comments[i] %></span>
									</li>
								<% } -%>
								<% j-- -%>
							<% } -%>	
						<% } else { -%>
							<h4>No Comments</h4>
						<% } -%>
					</ul>
				</div>
			</div><!--row-->
			
			<div class='row'>
				<div class='col-md-4 col-sm-4 pull-right'>
					<button id='submitToDoctor' type='submit'>See a Doctor<i class='glyphicon glyphicon-chevron-right'></i></button>
				</div>
			</div>
		</div><!--container-fluid-->
	</form>

	<div class='filler'></div>
	<script>
	var doc = <%- JSON.stringify(doc) %>;
	console.log("this is patient info" + JSON.stringify(doc));
	</script>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js " integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin=" anonymous "></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript " src="js/patient-info.js "></script>
	<script type="text/javascript " src="js/main.js "></script>
</body>

</html>